<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>苏尼特右旗-贫困收入排名</title>
	<meta name="keywords" content="苏尼特右旗-贫困收入排名">
    <meta name="description" content="苏尼特右旗-贫困收入排名">
	<link rel="stylesheet" href="$!webPath/index/css/bootstrap.min.css" type="text/css">
	<link rel="stylesheet" href="$!webPath/index/css/reset.css" type="text/css">
	<link rel="stylesheet" href="$!webPath/index/css/index.css" type="text/css">
</head>
<body class="mW-1108">
	<div class="PovertyAlleviationWrap">
		<div class="PAP_header">
			<select id="dateSelect" class="PAP_choice">
				<option value="2017">2017</option>
				<option value="2018">2018</option>
				<option value="2019">2019</option>
				<option value="2020">2020</option>
				<option value="2021">2021</option>
				<option value="2022">2022</option>
				<option value="2023">2023</option>
				<option value="2024">2024</option>
				<option value="2025">2025</option>
				<option value="2026">2026</option>
				<option value="2027">2027</option>
				<option value="2028">2028</option>
				<option value="2029">2029</option>
				<option value="2030">2030</option>
			</select>
			<button class="addButton">开始统计</button>
		</div>
		<div class="SCCon">
			<div class="leftEcharts">
				<h3 class="ech_title">苏尼特贫困收入分布情况</h3>
				<div id="incomePic1"></div>
				<h3 class="ech_title">苏尼特贫困户收入情况</h3>
				<div id="incomePic2"></div>
			</div>
			<div class="rightTable">
				<table class="PAP_Table">
					<thead>
						<tr>
							<th>序号</th>
							<th>乡镇</th>
							<th>0-0.4</th>
							<th>0.4-0.8</th>
							<th>0.8-1.2</th>
							<th>1.2-1.6</th>
							<th>1.6-2.0</th>
							<th>2.0-2.4</th>
							<th>2.4以上</th>
							<th>统计</th>
						</tr>
					</thead>
					<tbody>
					#foreach($table in $!resultMap.tableData)
					<tr>
						<td>$!{velocityCount}</td>
						<td>$table.townName</td>
						<td>$table.l1Cnt</td>
						<td>$table.l2Cnt</td>
						<td>$table.l3Cnt</td>
						<td>$table.l4Cnt</td>
						<td>$table.l5Cnt</td>
						<td>$table.l6Cnt</td>
						<td>$table.l7Cnt</td>
						<td>$table.allCnt</td>
					</tr>
					#end
					<tbody>
				</table>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="$!webPath/index/js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="$!webPath/index/js/echarts.min.js"></script>
<script type="text/javascript">
// 贫困户分布情况
$(function(){
	// 苏尼特贫困收入分布情况
	var incomePic1 = echarts.init(document.getElementById('incomePic1'));
	var incomePic1option = {
		title : {
            text : ""
        },
        tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
	    // legend: {
	    //     data:['贫困人口','贫困户']
	    // },
	    grid: {
	    	top: '5%',
	        left: '3%',
	        right: '4%',
	        bottom: '8%',
	        containLabel: true
	    },	    
	    calculable : true,
	    xAxis : [
	        {
	            // type : 'category',
	            data : [
	            		#foreach($table in $!resultMap.tableData)
							'$table.townName',
						#end
				],
			            // 标题想显示全部文字则不注释以下代码
			         //    "axisLabel":{  
				        //     interval: 0  
				        // }  
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:'人均收入\n万元/年',
	            type:'bar',
	            data:[18,24,27,14,21,19,18],
	            barWidth : 15,
	            itemStyle:{
                    normal:{
                        color:'#4c8cfa'
                    }
                },
	        }
	    ]
	};
	incomePic1.setOption(incomePic1option);

	// 苏尼特贫困户收入情况
	var incomePic2 = echarts.init(document.getElementById('incomePic2'));
	var incomePic2option = {
		title : {
            text : ""
        },
        tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
	    // legend: {
	    //     data:['贫困人口','贫困户']
	    // },
	    grid: {
	    	top: '5%',
	        left: '3%',
	        right: '4%',
	        bottom: '8%',
	        containLabel: true
	    },	    
	    calculable : true,
	    xAxis : [
	        {
	            // type : 'category',
	            data : [
	            		#foreach($table in $!resultMap.tableData)
							'$table.townName',
						#end
				],
			            // 标题想显示全部文字则不注释以下代码
			         //    "axisLabel":{  
				        //     interval: 0  
				        // }  
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:'贫困类型',
	            type:'bar',
	            data:[
	            #foreach($table in $!resultMap.tableData)
				'$table.allCnt',
				#end
				],
	            barWidth : 15,
	            itemStyle:{
                    normal:{
                        color:'#13ad65'
                    }
                },
	        }
	    ]
	};
	incomePic2.setOption(incomePic2option);

})
</script>
</body>
</html>